<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import MusicVideList from './components/MusicVideoList.vue'

const activeName = ref('内地')

const musicVideo = ref(null)
const isShowUp = ref(false)
// 回到顶部
const toTop = () => {
  const timer = setInterval(() => {
    let top = musicVideo.value.scrollTop
    if (top < 1) {
      clearInterval(timer)
    } else {
      musicVideo.value.scrollTop = top / 2
    }
  }, 50)
}

onMounted(() => {
  musicVideo.value.addEventListener('scroll', watchScrollFn)
})
const watchScrollFn = () => {
  const top = musicVideo.value.scrollTop
  if (top > 300) {
    isShowUp.value = true
  } else {
    isShowUp.value = false
  }
}
// 清除 scroll 侦听器
onBeforeUnmount(() => {
  musicVideo.value.removeEventListener('scroll', watchScrollFn)
})

</script>

<template>
  <div class="music-video" ref="musicVideo">
    <div class="tabs">
      <el-tabs v-model="activeName" :stretch="true">
        <el-tab-pane label="内地" name="内地">
          <MusicVideList :zone="activeName" v-if="activeName === '内地'" />
        </el-tab-pane>
        <el-tab-pane label="港台" name="港台">
          <MusicVideList :zone="activeName" v-if="activeName === '港台'" />
        </el-tab-pane>
        <el-tab-pane label="欧美" name="欧美">
          <MusicVideList :zone="activeName" v-if="activeName === '欧美'" />
        </el-tab-pane>
        <el-tab-pane label="韩国" name="韩国">
          <MusicVideList :zone="activeName" v-if="activeName === '韩国'" />
        </el-tab-pane>
      </el-tabs>
    </div>

    <div class="right-box" @click="toTop" title="回到顶部" v-show="isShowUp">
      UP
    </div>
  </div>
</template>

<style scoped lang='scss'>
.music-video {
  max-width: 1165px;
  margin: 0 auto;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow: auto;

  .right-box {
    height: 50px;
    width: 50px;
    position: fixed;
    right: 100px;
    bottom: 120px;
    background-color: #fff;
    box-shadow: 0px 0px 10px #ddd;
    text-align: center;
    line-height: 50px;
    border-radius: 3px;
    color: $sucColor;
    font-weight: bold;
    letter-spacing: 1px;
    cursor: pointer;
  }

  :deep(.el-tabs__item) {
    height: 60px;
    font-size: 16px;
    font-weight: bold;
  }
}
</style>
